<template>
  <div ref="chart"></div>
</template>

<script>
import * as config from './chartsData'
export default {
  name: 'Charts',
  data () {
    return {
      myChart: undefined
    }
  },
  props: {
    chartData: {
      type: Object,
      default() {
        return {}
      }
    },
    chartType: {
      type: String,
      default: ''
    }
  },
  mounted() {
    this.drawCharts(this.chartData);
  },
  computed: {
  },
  watch: {
    chartData: {
      handler(value) {
        this.drawCharts(value);
      },
      deep: true
    }
  },
  methods: {
    drawCharts(value) {
      if (this.myChart) {
        this.myChart.dispose();//销毁
      }
      this.myChart = this.$echarts.init(this.$refs.chart);
      let option = config[this.chartType](value)
      this.myChart.setOption(option);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  }
}
</script>

<style lang="less" scoped>
</style>
